<template>
  <el-card>
    <el-row :gutter="24">
      <el-col :span="12">
        <!-- 绑定名称查询  绑定失败则输入不进去-->
        <el-input
          clearable
          @clear="listPage"
          v-model="selectGoodsName"
          placeholder="请输入管理员名称查询"
          class="selectInput"
        ></el-input>
      </el-col>
      <el-col :span="12">
        <el-button type="primary" icon="el-icon-search" @click="setListPage"
          >查询</el-button
        >
        <el-button type="success" icon="el-icon-plus" @click="openAddDialog"
          >添加</el-button
        >
      </el-col>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="goodsName" label="产品名称"> </el-table-column>
      <el-table-column prop="data" label="上市日期"> </el-table-column>
      <el-table-column prop="id" label="序号"> </el-table-column>
      <el-table-column prop="goodsRate" label="利率"> </el-table-column>
      <el-table-column prop="state" label="操作">
        <template slot-scope="scope">
          <el-tooltip content="点击修改" placement="left">
            <el-button
              type="warning"
              circle
              icon="el-icon-edit"
              @click="openEditDialog(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="点击删除" placement="right">
            <el-button
              type="danger"
              circle
              icon="el-icon-delete"
              @click="remove(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="pager.page"
      :page-size="pager.size"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total"
    ></el-pagination>

    <el-dialog :visible="addFlag" title="添加商品" class="openDialog">
      <el-form>
        <el-form-item>
          <el-input
            v-model="goodsDTO.goodsName"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="goodsDTO.goodsRate"
            placeholder="请输入商品利率"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible="editFlag"
      title="修改商品信息"
      @close="editFlag = false"
      class="openDialog"
    >
      <el-form>
        <el-form-item>
          <el-input
            v-model="goodsDTO.goodsName"
            placeholder="请输入商品名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="goodsDTO.goodsRate"
            placeholder="请输入商品利率"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      addFlag: false,
      editFlag: false,
      tableData: [{ goodsName: "a" }],
      selectGoodsName: "",
      pager: {
        currentPage: 1,
        size: 5,
        total: 0,
      },

      goodsDTO: {
        id: 0,
        goodsName: "",
        goodsRate: "",
      },
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.info("改变分页起始数据" + val);
      this.pager.currentPage = val;
      this.listPage();
    },
    handleSizeChange(val) {
      console.info("改变每页显示的最大条数" + val);
      this.pager.size = val;
      this.listPage();
    },
    update() {
      this.$http
        .post("http://127.0.0.1:8001/goods/modifyOne", {
          params: this.goodsDTO,
        })
        .then((res) => {
          if (res.data.code == 1000) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.editFlag = !this.editFlag;

            this.listPage();
          }
        });
    },
    openEditDialog(row) {
      this.editFlag = !this.editFlag;
      this.goodsDTO = row;
    },
    remove(row) {
      // console.log(row)
      this.goodsDTO.id = row.id;
      console.log(this.goodsDTO.id);
      this.$http
        .post("http://127.0.0.1:8001/goods/removeOne", {
          id: this.goodsDTO.id,
        })
        .then((res) => {
          if (res.data.code == 1000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.listPage();
          }
        });
    },

    save() {
      //   this.$message({
      //   message: '恭喜你，增加成功',
      //   type: 'success'
      // });

      this.$http
        .post("http://127.0.0.1:8001/goods/saveOne", { params: this.goodsDTO })
        .then((res) => {
          if (res.data.code == 1000) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.addFlag = !this.addFlag;

            this.listPage();
          }
        });
    },

    openAddDialog() {
      this.addFlag = !this.addFlag;
    },

    setListPage() {
      this.$http
        .post("http://127.0.0.1:8001/goods/querGoodsByName", {
          currentPage: this.pager.currentPage,
          size: this.pager.size,
          goodsName: this.selectGoodsName,
        })
        .then((res) => {
          console.info(res);

          this.tableData = res.data.data.goods;
          this.pager.total = res.data.data.total;
        });
      // console.log(this.tableData);
    },
    listPage() {
      this.$http
        .post("http://127.0.0.1:8001/goods/querGoodsAsc", {
          params: {
            currentPage: this.pager.currentPage,
            size: this.pager.size,
            username: this.username,
          },
        })
        .then((res) => {
          console.info(res);

          this.tableData = res.data.data.goods;
          this.pager.total = res.data.data.total;
        });
      console.log(this.tableData);
    },
  },

  created() {
    this.listPage();
  },
};
</script>

<style scoped>
.el-table-column {
  width: 20%;
}
.el-card {
  width: 100%;
}
.openDialog {
  margin-left: 25%;
  width: 50%;
}
</style>